<template>
  <div class="member-order">
    <!-- 体验jsx语法 JavaScript XML -->

    <!-- tab组件 -->
    <!--<XtxTabs v-model="activeName" @tab-click="handleClick">
      <XtxTabsPanel v-for="item in orderStatus"
                    :key="item.name"
                    :label="item.label"
                    :name="item.name">
      </XtxTabsPanel>
    </XtxTabs>-->

    <!-- 使用vue template自定义的模板 -->
    <XtxTabsTemp v-model="activeName" @tab-click="handleClick">
      <XtxTabsPanel v-for="item in orderStatus"
                    :key="item.name"
                    :label="item.label"
                    :name="item.name">
      </XtxTabsPanel>
    </XtxTabsTemp>

    <!-- 订单列表 -->
    <div class="order-list">
      <!-- loading效果 -->
      <div v-if="loading" class="loading"></div>
      <!-- none无数据 -->
      <div v-if="!loading && orderList.length ===0" class="none">暂无数据</div>
      <template v-if="orderList.length > 0">
        <OrderItem v-for="item in orderList"
                   :key="item"
                   :order="item"
                   @on-delete="handlerDelete"
                   @on-cancel="handlerCancel"
                   @on-confirm="handlerConfirm"
                   @on-logistics="handlerLogistics"
        ></OrderItem>
      </template>
    </div>

    <!-- 分页组件, total是必填项, 加入只有一页的话, 就不显示分页组件了 -->
    <XtxPagination
        v-if="total > reqParams.pageSize"
        :cur-page="reqParams.page"
        :pageSize="reqParams.pageSize"
        :total="total"
        @current-change="handlePageChange"></XtxPagination>

    <!-- 取消原因对话框组件 -->
    <OrderCancel ref="orderCancelRef"></OrderCancel>
    <!-- 查看物流对话框组件 -->
    <OrderLogistics ref="orderLogisticsRef"></OrderLogistics>
  </div>
</template>

<script>

import { orderStatus } from '@/constant'

import { reactive, ref, watch } from 'vue'
import XtxTabsPanel from '@/components/library/XtxTabsPanel'
import OrderItem from '@/components/member/OrderItem'
import API from '@/api/order'
import OrderCancel from '@/components/member/OrderCancel'
import { useCancel, useDelete, useConfirm } from '@/components/member/useOrderAction'
import OrderLogistics from '@/components/member/OrderLogistics'

export default {
  name: 'index',
  components: {
    OrderLogistics,
    OrderCancel,
    OrderItem,
    XtxTabsPanel
  },
  setup() {
    const activeName = ref('all')
    // 订单数据
    const orderList = ref([])
    // 订单总数量
    const total = ref(0)
    // 取消订单组件的ref
    const orderCancelRef = ref(null)
    // 查看物流组件的ref
    const orderLogisticsRef = ref(null)

    // 筛选条件 -- 是否可以放到vuex中, 这个orderState很重要
    const reqParams = reactive({
      page: 1,
      pageSize: 10,
      orderState: 0
    })
    // 使用一个变量控制请求loading效果
    const loading = ref(false)

    /**
     * 监听tab的切换
     * @param tab   '{tabName: '' , index: ''}'
     */
    const handleClick = (tab) => {
      reqParams.page = 1
      // tab.index 就是订单的状态
      reqParams.orderState = tab.index
    }

    /**
     * 封装获取请求的数据, 后面删除订单也会用到
     * Tips: const声明的变量要放在前面, 不会存在var声明的变量, 变量提升作用
     */
    const getOrderList = () => {
      // 获取数据
      API.getOrderList(...Object.values(reqParams))
          .then((res) => {
            orderList.value = res.result.items
            total.value = res.result.counts
            loading.value = false
          })
    }

    // 监听reqParams的变化, 从而发送请求
    watch(reqParams, (newVal) => {
      loading.value = true
      getOrderList()
    }, { immediate: true })

    const handlePageChange = (newPage) => {
      reqParams.page = newPage
    }

    // 取消订单
    const { handlerCancel } = useCancel(orderCancelRef)

    // 删除订单
    const { handlerDelete } = useDelete(getOrderList)

    // 确认收货
    const { handlerConfirm } = useConfirm()

    /**
     * 查看物流
     * @param order 订单信息
     */
    const handlerLogistics = (order) => {
      // 打开物流对话框
      orderLogisticsRef.value.open(order)
    }

    return {
      activeName,
      reqParams,
      total,
      handleClick,
      orderStatus,
      orderList,
      loading,
      handlePageChange,
      handlerCancel,
      orderCancelRef,
      handlerDelete,
      handlerConfirm,
      handlerLogistics,
      orderLogisticsRef
    }
  }
}
</script>

<style lang="less" scoped>

.member-order {
  height: 100%;
  background-color: #ffffff;

  .order-list {
    // 与谁形成子绝父相  与loading加载效果形成子绝父相
    position: relative;
    // 最小宽度为 400px, 处理数据为none的情况, 显示一个`暂无数据`显示
    min-height: 400px;
    padding: 20px;
    background-color: #fff;
  }
}

.loading {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.9) url("../../../assets/images/load.gif") no-repeat center;
}

.none {
  height: 400px;
  text-align: center;
  line-height: 400px;
  color: #999;
}
</style>
